<!--
 * @Description: 基础布局
 * @Autor: 人生
 * @Date: 2020-09-28 09:41:14
 * @,@LastEditors: ,: 人生
 -->
<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <div
      v-if="isMobile"
      class="ant-pro-sider-menu"
    >
      <div
        :class="{'ant-drawer-open':!collapsed}"
        @click.stop="switchCollapsed"
      >
        <div class="ant-drawer-mask"></div>
        <div class="ant-drawer-content">
          <a-layout-sider
            breakpoint="lg"
            collapsed-width="0"
            v-model="collapsed"
            :trigger="null"
            collapsible
            style="background: #fff"
            @breakpoint="breakpoint"
          >
            <div class="logo" />
            <!-- 左侧菜单 -->
            <nav-menu :collapsed="collapsed"></nav-menu>
          </a-layout-sider>
        </div>
      </div>
    </div>
    <a-layout-sider
      v-else
      breakpoint="lg"
      v-model="collapsed"
      :trigger="null"
      collapsible
      style="background: #fff"
      @breakpoint="breakpoint"
    >
      <div class="logo">
        <h3>知识产权信息服务平台</h3>
      </div>
      <!-- 左侧菜单 -->
      <nav-menu :collapsed="collapsed"></nav-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">

        <a-row
          type="flex"
          justify="space-between"
        >
          <a-col>
            <a-icon
              class="trigger"
              :type="collapsed ? 'menu-unfold' : 'menu-fold'"
              @click="() => (collapsed = !collapsed)"
            />
          </a-col>
          <a-col
            :span="20"
            class="right-avatar"
          >
            <div class="m-r-50 title" >
              <a
                href="#"
                class="m-r-30"
                v-show="roles.includes('专利监控系统')"
              >专利监控系统</a>
              <a
                href="#"
                class="m-r-30"
                 v-show="roles.includes('商标监控系统')"
              >商标监控系统</a>
              <a
                href="#"
                 v-show="roles.includes('专利资助系统')"
              >专利资助系统</a>
            </div>
            <AvatarDropdown class="m-r-30" />
          </a-col>
        </a-row>

      </a-layout-header>
      <a-layout-content>
        <!-- <slot></slot> -->
        <div class="breadcrumb">
          <a-breadcrumb :routes="routes">
            <template
              slot="itemRender"
              slot-scope="{ route, params, routes, paths }"
            >
              <span v-if="routes.indexOf(route) === routes.length - 1">
                {{ route.breadcrumbName }}
              </span>
              <router-link
                v-else
                :to="`${route.path}`"
              >
                {{ route.meta.title }}
              </router-link>
            </template>
          </a-breadcrumb>
          {{ $route.meta.title }}
        </div>
        <div :style="{ margin: '0 24px 24px 24px',padding:'16px', background: '#fff', height: 'calc(100% - 64px)',overflow: 'auto' }">
          <router-view />
          <div id="container"></div>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import {
  TOGGLE_MOBILE_TYPE,
  SIDEBAR_TYPE,
} from '@/store/mutation-types';
import { mapState } from 'vuex';
import AvatarDropdown from './AvatarDropdown';
import {start} from 'qiankun'
export default {
  data() {
    return {
      collapsed: false,
      // 是否手机模式
      isMobile: false,
    };
  },
  created() {
    // 处理侧栏收起状态
    this.$watch('collapsed', () => {
      this.$store.commit(SIDEBAR_TYPE, this.collapsed);
    });
    this.$watch('isMobile', () => {
      this.$store.commit(TOGGLE_MOBILE_TYPE, this.isMobile);
    });
  },
  mounted(){
     if (!window.qiankunStarted) {
      window.qiankunStarted = true;
      start();
    }
  },
  computed: {
    ...mapState({
      roles: (state) => state.user.roles,
    }),
    routes() {
      return this.$route.matched.slice(1);
    },
  },
  components: {
    AvatarDropdown,
  },
  methods: {
    breakpoint(broken) {
      console.log('broken===', broken);
      this.isMobile = broken;
    },
    switchCollapsed(e) {
      const ele = document.querySelector('.ant-drawer-content');
      if (!ele.contains(e.target)) {
        this.collapsed = !this.collapsed;
      }
    },
  },
};
</script>
<style lang="less" scoped>
#components-layout-demo-custom-trigger {
  height: 100%;
  .ant-pro-sider-menu {
    height: 100vh;
    position: absolute;
    .ant-drawer-open {
      position: relative;
      width: 100vw;
      height: 100vh;
    }
    .ant-drawer-mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.45);
      opacity: 1;
      z-index: 11;
      transition: opacity 0.3s linear, height 0s ease 0.3s;
    }
    .ant-drawer-content {
      height: 100%;
      position: absolute;
      z-index: 12;
    }
  }
  .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
  }
  .right-avatar {
    float: right;
    margin-right: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title > a {
      font-size: 22px;
    }
  }
  .trigger:hover {
    color: #1890ff;
  }
  .logo {
    position: relative;
    height: 64px;
    padding-left: 24px;
    overflow: hidden;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    line-height: 64px;
    background: #001529;
    background: white;
    -webkit-box-shadow: 1px 1px 0 0 #e8e8e8;
    box-shadow: 1px 1px 0 0 #e8e8e8;
    box-sizing: border-box;
  }
  /deep/ .ant-layout-content {
    overflow: auto;
    background: #f0f2f5 !important;
  }
  /deep/.ant-menu-root {
    height: calc(100vh - 64px);
    overflow: auto;
  }
  .breadcrumb {
    height: 40px;
    border-top: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
    padding: 0 24px;
  }
}
</style>
